<template>
  <!--选择委外方-->
  <section class="component select-entrusted">
    <data-box :data="dataSet" :selectionList.sync="selectionList" :page="pageService">
      <template slot="columns">
        <!--数据列区域-->
        <el-table-column prop="outsName" label="委外方" :min-width="$helper.getColumnWidth(3)"></el-table-column>
        <el-table-column prop="caseNum" label="案件数量" :min-width="$helper.getColumnWidth(4)"></el-table-column>
        <el-table-column prop="settleNum" label="结清数量" :min-width="$helper.getColumnWidth(4)"></el-table-column>
        <el-table-column prop="successRate" label="历史催收成功率" :min-width="$helper.getColumnWidth(5)" :formatter="row => $filter.toPercent(row.successRate)">
        </el-table-column>
        <el-table-column prop="settleAmount" label="结清总金额(万)" :min-width="$helper.getColumnWidth(4)"></el-table-column>
      </template>
    </data-box>
    <div class="operate-buttons">
      <el-button @click="dialog.caseDistribution=true" :disabled="selectionList.length === 0">下一步</el-button>
      <el-button @click="emitClose">取 消</el-button>
    </div>

    <el-dialog title="案件分配" @close="dialog.caseDistribution = false" width="1000px" :visible.sync="dialog.caseDistribution" :close-on-click-modal="false" :show-close="false" @open="onOpen" append-to-body>
      <case-distribution ref="distribution" :isLawsuit="isLawsuit" :selectedCaseIds="selectedCaseIds" :commissionIds="commissionIds" @close="onClose()" @pre="dialog.caseDistribution=false" @success="onSuccess"></case-distribution>
    </el-dialog>
  </section>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import DataBox from "~/components/common/data-box.vue";
import { Emit, Prop } from "vue-property-decorator";
import { PageService } from "~/utils/page.service";
import { Dependencies } from "~/core/decorator";
import { OutsourceStayService } from "~/services/domain-service/outsource-stay-manage.service";
import caseDistribution from './case-distribution.vue'; // 案件分配


@Component({
  components: {
    DataBox,
    caseDistribution
  }
})
export default class SelectEntrusted extends Vue {
  @Dependencies(PageService) private pageService: PageService;
  @Dependencies(OutsourceStayService)
  private outsourceStayService: OutsourceStayService;
  private selectionList: any[] = []; //选中的数据
  private dataSet: any[] = []; //受托方列表数据

  private dialog = {
    caseDistribution: false
  }

  @Prop({
    required: true,
    default: () => []
  })
  private selectedCaseIds: any[]

  /**
   * 是否全部数据
   */
  @Prop({ required: true })
  private isLawsuit: boolean;

  @Emit("close")
  private emitClose() {
    this.selectionList = [];
    this.refresh();
  }

  @Emit('success')
  private emitSuccess() { }

  private refresh() {
    // 默认加载列表
    this.outsourceStayService
      .searchOutsourcePreview(this.isLawsuit, this.pageService)
      .subscribe(data => {
        this.dataSet = data;
      });
  }

  private mounted() {
    this.refresh();
  }

  private get commissionIds() {
    return this.selectionList.map(v => v.outsourceId)
  }
  private onClose() {
    this.dialog.caseDistribution = false
    this.emitClose()
  }

  private onSuccess() {
    this.dialog.caseDistribution = false
    this.emitClose()
    // 提示父页面进行数据刷新
    this.emitSuccess()
  }

  private onOpen() {
    this.$nextTick(() => {
      const component = this.$refs.distribution as any
      component.refresh()
    })
  }
}
</script>
<style lang="less" scoped>
</style>
